<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="title">
                    <span>新增权限</span>
                </div>
                <div>
                    <el-button type="info" @click="refresh" icon="el-icon-refresh-right">重置</el-button>
                </div>
            </div>
            <div class="text item">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="权限名称">
                        <el-input v-model="form.menuName"></el-input>
                    </el-form-item>
                    <el-form-item label="权限分类">
                        <el-radio-group v-model="form.category" @input="radioInput">
                            <el-radio label="父权限" border></el-radio>
                            <el-radio label="子权限" border></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="权限英文" v-show="form.category == '子权限'">
                        <el-input v-model="form.perms"></el-input>
                    </el-form-item>
                    <el-form-item label="权限后端路径" v-show="form.category == '子权限'">
                        <el-input v-model="form.path"></el-input>
                    </el-form-item>
                    <el-form-item label="父权限ID" v-show="form.category == '子权限'">
                        <el-select v-model="form.categoryId" placeholder="请选择父权限">
                            <el-option :label="item.menuName" :value="item.id" v-for="item, index in menuCategory"
                                :key="'parent' + index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'PermissionAdd',
    data() {
        return {
            form: {
                menuName: '',
                path: '',
                perms: '',
                categoryId: "",
                category: "",
            },
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 获取权限分类
        async init() {
            let res = await this.$store.dispatch('getMenuCategory')
            if (!res.success) this.$myfun.resError(res)
        },
        // 提交
        async onSubmit() {
            let res = await this.$store.dispatch("savePermission", {
                categoryId: this.form.categoryId == "" ? 0 : this.form.categoryId,
                menuName: this.form.menuName,
                path: this.form.path,
                perms: this.form.perms,
            })
            if (res.success) {
                this.$message.success(res.message)
                this.refresh
            }
            else this.$myfun.resError(res)
        },
        // 重置
        refresh() {
            this.form.menuName = ""
            this.form.path = ""
            this.form.perms = ""
            this.form.category = ""
            this.form.categoryId = ""
        },
        // 父子菜单切换变化
        radioInput(value) {
            if (value == "父权限") this.form.categoryId = ""
        },
    },
    computed: {
        menuCategory() {
            return this.$store.state.permission.menuCategory
        },
    }
}
</script>

<style scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    font-size: 1.1rem;
    font-weight: 550;
}
</style>